<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!--移动端头部-->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <!--首页样式-->
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
    <!--rem插件-->
    <script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
    <!--负责上下滑动-->
    <script src="js/iscroll-probe.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/swiper-3.4.2.min.js"></script>
</head>

<body>
    <!--头部-->
    <header>
        <h3>电器商城</h3>
        <img src="img/效果图_03.jpg" alt="">
    </header>
    <!--主体-->
    <!--main相当于轨道，不动的-->
    <main class="main" id="main">
        <!--main-content相当于火车，上下滑动-->
        <section class="main-content">
            <div class="main-content-banner swiper-container" id="main-content-banner">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="img/img_02.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="img/img_50.jpg" />
                    </div>
                    <div class="swiper-slide">
                        <img src="img/img_52.jpg" />
                    </div>
                </div>
            </div>
            <nav>
                <ul class="nav-active1">
                    <li>
                        <img src="img/img_05.jpg" alt="">
                        <p>空调</p>
                    </li>
                    <li>
                        <img src="img/img_07.jpg" alt="">
                        <p>冰箱</p>
                    </li>
                    <li>
                        <img src="img/img_09.jpg" alt="">
                        <p>洗衣机</p>
                    </li>
                    <li>
                        <img src="img/img_11.jpg" alt="">
                        <p>厨房小电器</p>
                    </li>
                    <li>
                        <img src="img/img_17.jpg" alt="">
                        <p>厨房大电器</p>
                    </li>
                    <li>
                        <img src="img/img_18.jpg" alt="">
                        <p>生活家电</p>
                    </li>
                    <li>
                        <img src="img/img_20.jpg" alt="">
                        <p>热水器/净水器</p>
                    </li>
                    <li>
                        <img src="img/img_21.jpg" alt="">
                        <p>配件周边</p>
                    </li>
                </ul>
                <ul class="nav-active2">
                    <li><img src="img/img_27.jpg" alt=""></li>
                    <li><img src="img/img_29.jpg" alt=""></li>
                    <li><img src="img/img_31.jpg" alt=""></li>
                </ul>
            </nav>
            <ul class="main-active3">
                <li><img src="img/img_37.jpg" alt=""></li>
                <li><img src="img/img_39.jpg" alt=""></li>
                <li><img src="img/img_43.jpg" alt=""></li>
                <li><img src="img/img_44.jpg" alt=""></li>
            </ul>
            <ul class="main-active4">
                <li>
                    <img src="img/img_48.jpg" alt="">
                    <h4>我是空调 好冷好冷好冷&nbsp;好冷好冷啊</h4>
                    <p>￥1999.00<span><img src="img/电器商城_03.jpg" alt=""></span></p>
                </li>
                <li>
                    <img src="img/img_50.jpg" alt="">
                    <h4>我是电饭煲 好饿&nbsp;好饿&nbsp;好饿&nbsp;好饿啊&nbsp;啊啊啊啊啊啊</h4>
                    <p>￥369.00<span><img src="img/电器商城_03.jpg" alt=""></span></p>
                </li>
                <li>
                    <img src="img/img_52.jpg" alt="">
                    <h4>吸尘器&nbsp;无线手持&nbsp;5款刷头&nbsp;升级电池&nbsp;壁挂充电P3 Lady</h4>
                    <p>￥1599.00<span><img src="img/电器商城_03.jpg" alt=""></span></p>
                </li>
            </ul>
            <div class="main-radio">
                <h5><span>精品单选</span><img src="img/效果图_04.jpg" alt=""></h5>
                <ul>
                    <li>
                        <img src="img/img_55.jpg" alt="">
                        <h4>
                            203升家用冰柜冷柜<span>节能静音BD/BC-203KM</span>
                        </h4>
                        <p>
                            ￥1099.00
                            <span><img src="img/电器商城_03.jpg" alt=""></span>
                        </p>
                    </li>
                    <li>
                        <img src="img/img_57.jpg" alt="">
                        <h4>
                            浴霸 灯暖换气照明三合一<span>灯暖、换气、照明三合一</span>
                        </h4>
                        <p>
                            ￥219.00
                            <span><img src="img/电器商城_03.jpg" alt=""></span>
                        </p>
                    </li>
                    <li>
                        <img src="img/img_62.jpg" alt="">
                        <h4>
                            冰箱432升十字对开...<span>温湿精控 超薄箱体</span>
                        </h4>
                        <p>
                            ￥6999.00
                            <span><img src="img/电器商城_03.jpg" alt=""></span>
                        </p>
                    </li>
                    <li>
                        <img src="img/img_64.jpg" alt="">
                        <h4>
                            破壁机 冷暖双杯&nbsp;智能加热<span>大马力全铜电机</span>
                        </h4>
                        <p>
                            ￥1199.00
                            <span><img src="img/电器商城_03.jpg" alt=""></span>
                        </p>
                    </li>
                    <li>
                        <img src="img/img_68.jpg" alt="">
                        <h4>
                            微波炉 21升&nbsp;机械式5档火...<span>农家散养</span>
                        </h4>

                    </li>
                    <li>
                        <img src="img/img_70.jpg" alt="">
                        <h4>
                            韩式电火锅 6L大容量双...<span>天然原生态</span>
                        </h4>

                    </li>

                </ul>
            </div>
        </section>
    </main>
    <!--尾部-->
    <footer>
        <ul>
            <li class="active">
                <img src="img/电器商城_77.jpg" alt="">
                <p>首页</p>
            </li>
            <li>
                <img src="img/电器商城_76.jpg" alt="">
                <p>分类</p>
            </li>
            <li>
                <img src="img/电器商城_77-28.jpg" alt="">
                <p>购物车</p>
            </li>
            <li>
                <img src="img/电器商城_77-29.jpg" alt="">
                <p>个人中心</p>
            </li>
        </ul>
    </footer>
</body>

</html>
<script type="text/javascript">
    //清除浏览器默认touchmove
    //清除浏览器默认touchmove事件addEventListener(事件名，回调函数，对象)
    document.addEventListener("touchmove", function(e) {
        e.preventDefault();
    }, {
        passive: false
    });
    new IScroll("#main", {});
    new Swiper("#main-content-banner", {
        autoplay: 2000,
        //      effect: "cube"
    })
</script>